
<script setup>

// import {Search} from '@element-plus/icons-vue'

import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }
const loginForm = ref({
  username: "admin",
  password: "admin123",
  rememberMe: false,
  code: "",
  uuid: ""
});

const onSubmit= function(){
    router.push('/index')
}
const handleClick= function(){
    
}

</script>

<template>
    <div class="login">
        <div class="logindiv">
            <div class="login-img">
                <img src="@/assets/images/login-background.jpg" >
            </div>
    
            <div class="login-item">
                <div class="loginleft">
                    <p class="loginleft-title">加我好友</p>
                    <div class="loginleft-erm">
                        <img src="@/assets/images/personal.png" alt="">
                    </div>
                    <p class="loginleft-message">其他扫码方式：微信</p>
            
                    <el-row :gutter="20" justify="center">
                        <el-col :span="6"><div class="grid-content ep-bg-purple">
                            <el-button round>加我好友</el-button>
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content ep-bg-purple">
                            <el-button round>加我好友</el-button>
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content ep-bg-purple" >
                            <el-button round>加我好友</el-button>
                        </div></el-col>
                    </el-row>
                </div>
                <div class="loginright">
                    <el-form :model="loginForm"  label-width="120px">
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="账号登录" name="first">
                                    <el-input v-model="loginForm.username" 
                                    size="large"
                                    auto-complete="off"
                                    placeholder="用户名"/>
                                    <el-input v-model="loginForm.password" 
                                    size="large"
                                    auto-complete="off"
                                    type="password" placeholder="密码"/>
                            
                                <el-button type="primary" 
                                size="large" 
                                @click="onSubmit">登录</el-button>
                                <div class="otherwise">
                                    <div class="otherwise-title">其他方式登录</div>
                                    <el-row :gutter="20" justify="center">
                                        <el-col :span="6" style="text-align: center;"><div class="grid-content ep-bg-purple">
                                            <svg class="icon" aria-hidden="false">
                                                    <use xlink:href="#icon-disanfangdengluweixin"></use>
                                                </svg>
                                        </div></el-col>
                                        <el-col :span="6" style="text-align: center;"><div class="grid-content ep-bg-purple">
                                            <svg class="icon" aria-hidden="true">
                                                    <use xlink:href="#icon-disanfangdengluweixin"></use>
                                                </svg>
                                        </div></el-col>
                                        <el-col :span="6" style="text-align: center;"><div class="grid-content ep-bg-purple" >
                                            <svg class="icon" aria-hidden="true">
                                                    <use xlink:href="#icon-disanfangdengluweixin"></use>
                                                </svg>
                                        </div></el-col>
                                    </el-row>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="注册" name="second">
                                <el-input v-model="loginForm.username" 
                                    size="large"
                                    auto-complete="off"
                                    placeholder="用户名"/>
                                    <el-input v-model="loginForm.password" 
                                    size="large"
                                    auto-complete="off"
                                    type="password" placeholder="密码"/>
                                    <el-input v-model="loginForm.code" 
                                    class="input-with-select input-self"
                                    size="large"
                                    auto-complete="off"
                                    type="text" placeholder="验证码">
                                        <template #append>
                                            <el-button style="margin-top: 0px; width: 100px;" type="primary">获取验证码</el-button> 
                                        </template>
                                    </el-input> 

                                <el-button type="primary" 
                                size="large" 
                                @click="onSubmit">注册</el-button>
                                <p class="agreement">注册即代表同意用户协议</p>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@import '@/assets/css/index.css';
</style>
